<template>
  <div>
    <el-input
        v-model="filterText"
        style="width: 240px"
        placeholder="关键词"
        autocomplete="off"
    />
    <el-tree
        class="filter-tree"
        ref="fileTree"
        :data="menuData"
        :props="props"
        :filter-node-method="filterMethod"
        empty-text="暂无数据"
    >
      <template #default="{ node }">

            <span class="prefix">
              <el-icon type=""><Folder v-if="node.data.isDirectory"/>
                <Tickets v-else/>
             </el-icon></span>
        <el-tooltip
            class="box-item"
            effect="dark"
            :content="node.label"
            placement="top"
        >
          <el-text style="margin-left: 6px" @drop="onDrag(node,$event)"  class="w-200px mb-2" size="large"
                   :truncated="true">{{ node.label }}
          </el-text>
        </el-tooltip>
      </template>
    </el-tree>
    <NewProject :dialogFormVisible="dialogFormVisible" @close="closeNewProject" @ok="createNewProject"/>
  </div>
</template>

<script>
import {ipcRenderer} from 'electron'
import {toRaw} from "vue";
import {Folder, Tickets} from "@element-plus/icons-vue";
import {FileUtils} from '@/utils/fileUtil'
import {LogUtils} from '@/utils/logUtils'
import NewProject from "@/components/project/newProject.vue";

export default {

  name: 'IndexMenu',
  components: {NewProject, Tickets, Folder},
  data() {
    return {
      props: {
        value: 'value',
        id: 'value',
        label: 'label',
        isDirectory: 'isDirectory',
        children: 'children',
      },
      menuData: [],
      projectPath: '',
      tipVisible: false,
      filterText: '',
      dialogFormVisible: false
    }
  },

  watch:{
      filterText(val) {
        this.$refs.fileTree.filter(val);
      }
  },
  methods: {
    async clickNode(node) {
      console.log("是否文件夹", node.data.isDirectory)
      LogUtils.info('IndexMenu', 'clickNode')
    },

    // 拖拽事件
    onDrag(node, e) {
      e.preventDefault();
      // 判断当前节点是不是文件夹, 只能让拖动到文件夹下面

      const items = [...e.dataTransfer.items];
      items.forEach(item => {
        if (item.kind === 'file') {
          const file = item.getAsFile();
          if (node.data.isDirectory) {
            FileUtils.saveFileToLocal(node.data.value, file)
            this.convertToElMenuData(FileUtils.getTreeStructureSync(this.projectPath))
          }
        }
      });
    },
    // 这里可以保留 filterMethod 方法，用于其他非计算属性的场景
    filterMethod(query, node) {
      return node && String(node.label).toLowerCase().includes(query.toLowerCase());
    },
    // 转换数据
    convertToElMenuData(data) {
      const menuArr = [];
      function processItem(item) {
        return {
          value: item.path,
          label: item.name,
          isDirectory: item.isDirectory,
          ...(item.isDirectory && {children: item.children.map(processItem)}),
        };
      }

      data.forEach(item => {
        menuArr.push(processItem(item));
      });
      this.menuData = toRaw(menuArr)
    },
    closeNewProject() {
      console.log("父组件:关闭")
      this.dialogFormVisible = false
    },
    createNewProject(folderPath) {
    // 引入dileUtils的创建 初始文件
      LogUtils.info('IndexMenu', `创建项目: ${folderPath}`)
    }

  },
  mounted() {
    // 文件夹监听事件
    ipcRenderer.on('folder-opened', (event, arg) => {
      LogUtils.info('IndexMenu', arg)
      console.log(arg)
      this.projectPath = arg
      this.convertToElMenuData(FileUtils.getTreeStructureSync(arg))
    });
    // 新建项目监听事件
    ipcRenderer.on('new-project-open', () => {
      this.dialogFormVisible = true

    })
    // //
    // ipcRenderer.on('new-project-cancel', () => {
    //   this.dialogFormVisible = true
    //   ipcRenderer.send("new-project-close")
    // })
  },
  beforeUnmount() {
    ipcRenderer.removeAllListeners('folder-opened');
  },

}
</script>

<style lang="less" scoped>
.layout-container-demo .el-menu {
  border-right: none;
  height: auto;
}

.el-tree-node__content {
  .el-space {
    width: 100%;
  }
}
</style>